<template>
	<view class="background">
		<view class="content">
			<view class="hade-icon" @tap="handleUpImage">
				<image class="image-block" :src="userInfo.icon" mode=""></image>
				<image class="icon" src="../../static/img/007.png" mode=""></image>
			</view>
			
			<view class="input-box">
				<view class="item items-center">
					<view class="left">
						昵称
					</view>
					<view class="right items-center">
						<input style="width: 85%;" type="text" placeholder="请输入昵称" v-model="userInfo.name">
						<image @tap="userInfo.name = ''" class="clean" src="../../static/img/clean.png" mode=""></image>
					</view>
				</view>
				<view class="item items-center">
					<view class="left">
						手机号
					</view>
					<view class="right items-center">
						<input type="text" :disabled="true" v-model="userInfo.phone">
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="btn shadow" @tap="updateUserInfoFn">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					icon:''
				},
				sex:[{name:'男'},{name:'女'}],
				isActive:0
			}
		},
		onLoad(e) {
			this.userInfo = getApp().globalData.userInfo
		},
		methods: {
			handleActive(index){
				this.isActive = index
			},
			handleUpImage(){
				var that = this
				uni.chooseImage({
					count:1,
					success(res){
						console.log(res,that.userInfo);
						that.uploadFileFn(res.tempFilePaths[0],that.userInfo)
					}
				})
			},
			
			
			async updateUserInfoFn(){
				let data = {
					uid: uni.getStorageSync('uid'),
					name:this.userInfo.name,
					icon:this.userInfo.icon,
					sex:this.isActive
				}
				let res = await this.$request("user/edit-user",data)
				if(res.result == '0'){
					this.$util.msg('修改成功')
					this.back()
				}
			},
			// 上传
			async uploadFileFn(url,item){
				let res = await this.$uploadFile('user/upload',{file:url})
				res = JSON.parse(res)
				if(res.result == '0'){
					this.$set(item,'icon', res.url)
					this.$forceUpdate()
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.image-block{
		width: 100%;
		height: 100%;
	}
	.content{
		padding: 60rpx;
		.hade-icon{
			width: 179rpx;
			height: 179rpx;
			position: relative;
			margin: 50rpx auto;
			.image-block{
				border-radius: 50%;
			}
			.icon{
				width: 46rpx;
				height: 46rpx;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
		.input-box{
			.item{
				padding: 30rpx 0;
				border-top: 1rpx solid #E7E7E7;
				.left{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.right{
					margin-left: 30rpx;
					flex: 1;
					.clean{
						margin-left: 30rpx;
						width: 33rpx;
						height: 33rpx;
					}
					.sex{
						margin-right: 30rpx;
						.sex-icon{
							width: 26rpx;
							height: 26rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
		
	}
	.foot{
		position: fixed;
		bottom: 200rpx;
		left: 0;
		width: 100%;
		.shadow{
			box-shadow: 1rpx 6rpx 20rpx 0rpx rgba(49,203,115,0.53);
		}
		.btn{
			width: 600rpx;
			height: 100rpx;
			background: #31CB73;
			border-radius: 61rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
